<template>
  <el-drawer
    :model-value="visible"
    title="手柄控制器映射设置"
    direction="ltr"
    :size="size"
    @close="handleClose()"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <el-descriptions title="方向" :column="2" border class="dialogStyle mb-2">
      <el-descriptions-item
        align="center"
        v-for="(value, key) in axesObject"
        :key="key"
        :label="key"
      >
        {{ value }}
      </el-descriptions-item>
    </el-descriptions>
    <el-descriptions title="按钮" :column="2" border class="dialogStyle mb-2">
      <el-descriptions-item
        align="center"
        v-for="(value, key) in btnsObject"
        :key="key"
        :label="key"
      >
        {{ value }}
      </el-descriptions-item>
    </el-descriptions>
    <el-descriptions :column="2" class="dialogStyle">
      <el-descriptions-item
        v-for="(item, index) in formItems"
        :key="index"
        :label="item.label"
        align="center"
      >
        <el-select
          v-model="formData[item.value]"
          :placeholder="item.label"
          size="small"
        >
          <el-option
            v-for="(item, i) in mergedKeys"
            :key="i"
            :label="item"
            :value="item"
          /> </el-select
      ></el-descriptions-item>
    </el-descriptions>
    <template #footer>
      <span>
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </span>
    </template>
  </el-drawer>
</template>
<script lang="ts" setup>
import { ref, reactive, toRefs, onMounted } from "vue";

interface myFormData {
  [key: string]: any;
}

const formData: myFormData = reactive({
  forward: "",
  left: "",
  right: "",
  backward: "",
  startlight: "",
  backlight: "",
  firstrod: "",
  secondrod: "",
});

const formItems = ref([
  { label: "前进", value: "forward" },
  { label: "左转", value: "left" },
  { label: "右转", value: "right" },
  { label: "后退", value: "backward" },
  { label: "开灯", value: "startlight" },
  { label: "关灯", value: "backlight" },
  { label: "舵机", value: "firstrod" },
  { label: "舵机", value: "secondrod" },
]);

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  axesObject: {
    type: Object,
    default: () => ({}),
  },
  btnsObject: {
    type: Object,
    default: () => ({}),
  },
  size: {
    type: String,
    default: "",
  },
  mergedKeys: {
    type: Array,
    default: () => [],
  },
});

const { visible, mergedKeys } = toRefs(props);

const emit = defineEmits(["update:visible", "changeSettingData"]);

onMounted(() => {
  const storedData: any = localStorage.getItem("formData");
  if (storedData) {
    const parsedData = JSON.parse(storedData);
    for (const item of formItems.value) {
      if (parsedData[item.value] !== undefined) {
        formData[item.value] = parsedData[item.value];
      }
    }
    emit("changeSettingData", formData);
  }
});

function handleClose() {
  emit("update:visible", false);
}

function handleConfirm() {
  localStorage.setItem("formData", JSON.stringify(formData));
  emit("update:visible", false);
}
</script>
<style>
@media screen and (max-width: 500px) {
  .dialogStyle {
    font-size: 12px;
  }
}
</style>
